import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts';
import moment from 'moment';
import styles from './index.less';
import { autoToolTip } from '@/utils/echarts_auto_tooltip';

type EChartsOption = echarts.EChartsOption;

export default function ColumnarBody(prors: any) {
  const { numericalDataCharts } = prors;
  let option: EChartsOption;
  const lineRef = useRef<HTMLDivElement>(null);
  let myChart: any;
  const initChart = () => {
    if (myChart != null && myChart != undefined) {
      myChart.dispose();
    }
    myChart = echarts.init(lineRef.current!);
    // myChart.clear()
    // const arr: any = [
    //   '10月5',
    //   '10月6',
    //   '10月7',
    //   '10月8',
    //   '10月9',
    //   '10月10',
    //   '10月11',
    // ];
    // const arr1: any = [700, 1500, 1800, 600, 1200, 1500, 500];
    // const arr2: any = [1100, 400, 1100, 1000, 1700, 1100, 300];
    // const arr: any = feedShiftDutyCondition?.xlist;
    // const arr1: any = feedShiftDutyCondition?.ylist?.map((item: any) => {
    //   return item.todaySoft;
    // });
    // const arr2: any = feedShiftDutyCondition?.ylist?.map((item: any) => {
    //   return item.todayHard;
    // });
    let odata: any = [];
    let odatax: any = [];
    let oseries: any = [];
    numericalDataCharts.forEach((element: any) => {
      odata.push(element.fishpondName);
      odatax = element?.xtimes.map((item: any) => {
        return moment(item).format('HH:mm');
      });

      let obj: any = {
        name: element.fishpondName,
        type: 'line',
        data: [],
        itemStyle: {
          normal: {
            lineStyle: {
              width: 0.5, //设置线条粗细
            },
          },
        },
      };
      // obj.name.push(element.fishpondName)
      obj.data = element?.ydatas.map((item: any) => {
        return item.value;
      });
      oseries.push(obj);
    });
    option = {
      // backgroundColor: '',
      // color: ['#178FFF', '#12FFDA'],
      legend: {
        left: 20,
        top: 0,
        // data: ['软颗粒', '硬颗粒'],
        data: odata,
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        padding: 5,
        confine: true,
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '5%',
        top: '18%',
        containLabel: true,
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            width: 1,
            color: '#7EA7BA',
            type: 'dotted',
          },
        },
        type: 'category',
        data: odatax,
        // data: arr,
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            width: 0.01,
            color: '#9BB7EF',
          },
        },
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      series: oseries,
      // series: [
      //   {
      //     name: '软颗粒',
      //     type: 'line',
      //     data: arr1,
      //   },
      //   {
      //     name: '硬颗粒',
      //     type: 'line',
      //     data: arr2,
      //   },
      // ],
    };
    option && myChart.setOption(option);
    // option && myChart.setOption(option);

    autoToolTip(myChart, option, {
      // 轮播间隔时间 默认2s
      interval: 2000,
      // 是否循环轮播所有序列
      loopSeries: true,
      // 第1个被轮播的序列下标
      seriesIndex: 0,
    });
  };
  useEffect(() => {
    if (numericalDataCharts?.length > 0) {
      initChart();
    }
  }, [numericalDataCharts]);
  return <div ref={lineRef} className={`${styles.lineBox} bgColor`}></div>;
}
